<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="80px">
      <el-form-item label="规则名称" prop="ruleName">
        <el-input
          v-model="queryParams.ruleName"
          placeholder="请输入规则名称"
          clearable
          style="width: 180px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="规则类型" prop="ruleType">
        <el-select
          v-model="queryParams.ruleType"
          placeholder="请选择类型"
          clearable
          style="width: 140px"
        >
          <el-option label="设备告警" value="device" />
          <el-option label="环境告警" value="environment" />
          <el-option label="系统告警" value="system" />
          <el-option label="检测告警" value="detection" />
        </el-select>
      </el-form-item>
      <el-form-item label="告警级别" prop="alarmLevel">
        <el-select
          v-model="queryParams.alarmLevel"
          placeholder="请选择级别"
          clearable
          style="width: 120px"
        >
          <el-option label="信息" value="info" />
          <el-option label="警告" value="warning" />
          <el-option label="严重" value="critical" />
          <el-option label="紧急" value="emergency" />
        </el-select>
      </el-form-item>
      <el-form-item label="启用状态" prop="isEnabled">
        <el-select
          v-model="queryParams.isEnabled"
          placeholder="请选择状态"
          clearable
          style="width: 120px"
        >
          <el-option label="已启用" value="1" />
          <el-option label="已禁用" value="0" />
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间" prop="createTimeRange">
        <el-date-picker
          v-model="queryParams.createTimeRange"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          style="width: 360px"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['system:alarmRuleConfig:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['system:alarmRuleConfig:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['system:alarmRuleConfig:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['system:alarmRuleConfig:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table 
      v-loading="loading" 
      :data="alarmRuleConfigList" 
      @selection-change="handleSelectionChange"
      stripe
      border
      highlight-current-row
      class="common-table"
    >
      <el-table-column type="selection" width="50" align="center" />
      <el-table-column label="ID" align="center" prop="ruleId" width="80" />
      <el-table-column label="规则信息" align="left" min-width="200">
        <template slot-scope="scope">
          <div>
            <div style="font-weight: 500; margin-bottom: 4px; display: flex; align-items: center;">
              <el-tag :type="getRuleTypeTagType(scope.row.ruleType)" size="mini" style="margin-right: 8px;">
                {{ getRuleTypeLabel(scope.row.ruleType) }}
              </el-tag>
              <span>{{ scope.row.ruleName }}</span>
            </div>
            <div style="font-size: 12px; color: #909399;" v-if="scope.row.deviceTypes">
              适用设备：{{ getShortDeviceTypes(scope.row.deviceTypes) }}
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="告警级别" align="center" width="100">
        <template slot-scope="scope">
          <el-tag :type="getLevelTagType(scope.row.alarmLevel)" size="mini">
            {{ getLevelLabel(scope.row.alarmLevel) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="触发条件" align="center" width="180">
        <template slot-scope="scope">
          <div v-if="scope.row.thresholdValue && scope.row.comparisonOperator">
            <div style="font-size: 12px; color: #909399;">阈值条件</div>
            <div style="font-weight: 500;">
              <span style="color: #409EFF;">{{ scope.row.comparisonOperator }}</span>
              <span style="margin-left: 4px; color: #F56C6C;">{{ scope.row.thresholdValue }}</span>
            </div>
            <div style="font-size: 11px; color: #909399; margin-top: 2px;">
              {{ getTriggerSummary(scope.row.triggerCondition) }}
            </div>
          </div>
          <div v-else style="color: #909399; font-size: 12px;">
            {{ getTriggerSummary(scope.row.triggerCondition) }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="通知方式" align="center" width="140">
        <template slot-scope="scope">
          <div class="notification-methods">
            <div v-for="method in getNotificationMethods(scope.row.notificationMethods)" :key="method.value">
              <i :class="method.icon" :style="{ color: method.color }"></i>
              <span style="margin-left: 4px; font-size: 12px;">{{ method.label }}</span>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" width="80">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.isEnabled"
            active-value="1"
            inactive-value="0"
            @change="handleStatusChange(scope.row)"
            :disabled="!$auth.hasPermi(['system:alarmRuleConfig:edit'])"
          />
        </template>
      </el-table-column>
      <el-table-column label="创建信息" align="center" width="140">
        <template slot-scope="scope">
          <div>
            <div style="font-size: 12px; color: #67C23A; font-weight: 500;" v-if="scope.row.createBy">
              {{ scope.row.createBy }}
            </div>
            <div style="font-size: 11px; color: #909399;" v-if="scope.row.createTime">
              {{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}') }}
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="120" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['system:alarmRuleConfig:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['system:alarmRuleConfig:remove']"
            style="color: #F56C6C"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改告警规则配置对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="900px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="90px">
        <el-tabs v-model="activeTab" type="border-card">
          <el-tab-pane label="基本设置" name="basic">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="规则名称" prop="ruleName">
                  <el-input 
                    v-model="form.ruleName" 
                    placeholder="请输入规则名称"
                    maxlength="100"
                    show-word-limit
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="规则类型" prop="ruleType">
                  <el-select v-model="form.ruleType" placeholder="请选择规则类型" style="width: 100%">
                    <el-option label="设备告警" value="device">
                      <span style="color: #409EFF">设备告警 - 设备状态异常</span>
                    </el-option>
                    <el-option label="环境告警" value="environment">
                      <span style="color: #67C23A">环境告警 - 环境参数异常</span>
                    </el-option>
                    <el-option label="系统告警" value="system">
                      <span style="color: #E6A23C">系统告警 - 系统运行异常</span>
                    </el-option>
                    <el-option label="检测告警" value="detection">
                      <span style="color: #F56C6C">检测告警 - AI检测异常</span>
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="告警级别" prop="alarmLevel">
                  <el-select v-model="form.alarmLevel" placeholder="请选择告警级别" style="width: 100%">
                    <el-option label="信息" value="info">
                      <span style="color: #909399">信息 - 一般性提示</span>
                    </el-option>
                    <el-option label="警告" value="warning">
                      <span style="color: #E6A23C">警告 - 需要关注</span>
                    </el-option>
                    <el-option label="严重" value="critical">
                      <span style="color: #F56C6C">严重 - 影响业务</span>
                    </el-option>
                    <el-option label="紧急" value="emergency">
                      <span style="color: #FF0000">紧急 - 立即处理</span>
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="启用状态">
                  <el-switch
                    v-model="form.isEnabled"
                    active-value="1"
                    inactive-value="0"
                    active-text="启用"
                    inactive-text="禁用"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="适用设备">
                  <el-checkbox-group v-model="form.deviceTypesList">
                    <el-checkbox label="sensor">传感器设备</el-checkbox>
                    <el-checkbox label="camera">摄像头设备</el-checkbox>
                    <el-checkbox label="controller">控制器设备</el-checkbox>
                    <el-checkbox label="monitor">监控设备</el-checkbox>
                    <el-checkbox label="network">网络设备</el-checkbox>
                    <el-checkbox label="server">服务器设备</el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="告警消息模板">
                  <el-input 
                    v-model="form.alarmMessageTemplate" 
                    type="textarea" 
                    placeholder="请输入告警消息模板，支持变量：{deviceName}、{value}、{time}等"
                    :rows="3"
                    maxlength="500"
                    show-word-limit
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="触发条件" name="trigger">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="阈值" prop="thresholdValue">
                  <el-input v-model="form.thresholdValue" placeholder="请输入阈值（如：25、80%、100MB等）" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="比较运算符" prop="comparisonOperator">
                  <el-select v-model="form.comparisonOperator" placeholder="请选择运算符" style="width: 100%">
                    <el-option label="大于 >" value=">" />
                    <el-option label="大于等于 >=" value=">=" />
                    <el-option label="小于 <" value="<" />
                    <el-option label="小于等于 <=" value="<=" />
                    <el-option label="等于 =" value="=" />
                    <el-option label="不等于 !=" value="!=" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="触发条件" prop="triggerCondition">
                  <div style="margin-bottom: 10px;">
                    <el-button size="mini" type="primary" @click="insertConditionTemplate('temperature')">温度条件</el-button>
                    <el-button size="mini" type="success" @click="insertConditionTemplate('humidity')">湿度条件</el-button>
                    <el-button size="mini" type="info" @click="insertConditionTemplate('device')">设备状态</el-button>
                    <el-button size="mini" type="warning" @click="insertConditionTemplate('system')">系统指标</el-button>
                  </div>
                  <el-input 
                    v-model="form.triggerCondition" 
                    type="textarea" 
                    placeholder="请输入触发条件JSON配置，可点击上方按钮插入模板"
                    :rows="8"
                    maxlength="2000"
                    show-word-limit
                  />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-alert
                  title="触发条件说明"
                  type="info"
                  description="触发条件使用JSON格式配置，支持复杂的逻辑判断。可以配置多个条件，支持AND、OR逻辑运算。"
                  :closable="false"
                  show-icon>
                </el-alert>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="通知配置" name="notification">
            <el-row :gutter="20">
              <el-col :span="24">
                <el-form-item label="通知方式">
                  <el-checkbox-group v-model="form.notificationMethodsList">
                    <el-checkbox label="system">
                      <i class="el-icon-bell" style="color: #409EFF; margin-right: 4px;"></i>
                      系统内通知
                    </el-checkbox>
                    <el-checkbox label="email">
                      <i class="el-icon-message" style="color: #67C23A; margin-right: 4px;"></i>
                      邮件通知
                    </el-checkbox>
                    <el-checkbox label="sms">
                      <i class="el-icon-phone" style="color: #E6A23C; margin-right: 4px;"></i>
                      短信通知
                    </el-checkbox>
                    <el-checkbox label="webhook">
                      <i class="el-icon-link" style="color: #F56C6C; margin-right: 4px;"></i>
                      Webhook通知
                    </el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </el-col>
              <el-col :span="24" v-if="form.notificationMethodsList && form.notificationMethodsList.includes('email')">
                <el-form-item label="邮件配置">
                  <el-input 
                    v-model="form.emailConfig" 
                    placeholder="请输入邮件地址，多个用逗号分隔"
                    maxlength="200"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="24" v-if="form.notificationMethodsList && form.notificationMethodsList.includes('sms')">
                <el-form-item label="短信配置">
                  <el-input 
                    v-model="form.smsConfig" 
                    placeholder="请输入手机号码，多个用逗号分隔"
                    maxlength="200"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="24" v-if="form.notificationMethodsList && form.notificationMethodsList.includes('webhook')">
                <el-form-item label="Webhook配置">
                  <el-input 
                    v-model="form.webhookConfig" 
                    placeholder="请输入Webhook URL地址"
                    maxlength="200"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-alert
                  title="通知配置说明"
                  type="warning"
                  description="系统内通知：在系统内显示告警信息；邮件通知：发送邮件到指定邮箱；短信通知：发送短信到指定手机；Webhook：向指定URL发送HTTP请求。"
                  :closable="false"
                  show-icon>
                </el-alert>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listAlarmRuleConfig, getAlarmRuleConfig, delAlarmRuleConfig, addAlarmRuleConfig, updateAlarmRuleConfig } from "@/api/system/alarmRuleConfig";

export default {
  name: "AlarmRuleConfig",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 告警规则配置表格数据
      alarmRuleConfigList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 当前活跃标签
      activeTab: "basic",
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        ruleName: null,
        ruleType: null,
        alarmLevel: null,
        isEnabled: null,
        createTimeRange: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        ruleName: [
          { required: true, message: "规则名称不能为空", trigger: "blur" }
        ],
        ruleType: [
          { required: true, message: "规则类型不能为空", trigger: "change" }
        ],
        alarmLevel: [
          { required: true, message: "告警级别不能为空", trigger: "change" }
        ],
        triggerCondition: [
          { required: true, message: "触发条件不能为空", trigger: "blur" }
        ],
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询告警规则配置列表 */
    getList() {
      this.loading = true;
      // 处理日期范围查询
      if (this.queryParams.createTimeRange && this.queryParams.createTimeRange.length === 2) {
        this.queryParams.createTimeStart = this.queryParams.createTimeRange[0];
        this.queryParams.createTimeEnd = this.queryParams.createTimeRange[1];
      } else {
        this.queryParams.createTimeStart = null;
        this.queryParams.createTimeEnd = null;
      }
      
      listAlarmRuleConfig(this.queryParams).then(response => {
        this.alarmRuleConfigList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 获取规则类型标签 */
    getRuleTypeLabel(ruleType) {
      const typeMap = {
        'device': '设备告警',
        'environment': '环境告警',
        'system': '系统告警',
        'detection': '检测告警'
      };
      return typeMap[ruleType] || ruleType;
    },
    /** 获取规则类型标签类型 */
    getRuleTypeTagType(ruleType) {
      const typeMap = {
        'device': '',
        'environment': 'success',
        'system': 'warning',
        'detection': 'danger'
      };
      return typeMap[ruleType] || '';
    },
    /** 获取告警级别标签 */
    getLevelLabel(level) {
      const levelMap = {
        'info': '信息',
        'warning': '警告',
        'critical': '严重',
        'emergency': '紧急'
      };
      return levelMap[level] || level;
    },
    /** 获取告警级别标签类型 */
    getLevelTagType(level) {
      const levelMap = {
        'info': 'info',
        'warning': 'warning',
        'critical': 'danger',
        'emergency': 'danger'
      };
      return levelMap[level] || '';
    },
    /** 获取设备类型简短显示 */
    getShortDeviceTypes(deviceTypes) {
      if (!deviceTypes) return '';
      const types = deviceTypes.split(',');
      if (types.length <= 2) {
        return types.join('、');
      } else {
        return types.slice(0, 2).join('、') + '等' + types.length + '种';
      }
    },
    /** 获取触发条件摘要 */
    getTriggerSummary(triggerCondition) {
      if (!triggerCondition) return '';
      try {
        const condition = JSON.parse(triggerCondition);
        if (condition.field) {
          return `监控${condition.field}`;
        } else if (condition.conditions && condition.conditions.length > 0) {
          return `${condition.conditions.length}个条件`;
        }
        return '复杂条件';
      } catch (e) {
        return '配置错误';
      }
    },
    /** 获取通知方式 */
    getNotificationMethods(notificationMethods) {
      if (!notificationMethods) return [];
      const methods = notificationMethods.split(',');
      const methodConfig = {
        'system': { label: '系统', icon: 'el-icon-bell', color: '#409EFF' },
        'email': { label: '邮件', icon: 'el-icon-message', color: '#67C23A' },
        'sms': { label: '短信', icon: 'el-icon-phone', color: '#E6A23C' },
        'webhook': { label: 'Webhook', icon: 'el-icon-link', color: '#F56C6C' }
      };
      return methods.map(method => ({
        value: method,
        ...methodConfig[method] || { label: method, icon: 'el-icon-info', color: '#909399' }
      }));
    },
    /** 状态变更处理 */
    handleStatusChange(row) {
      const status = row.isEnabled === '1' ? '启用' : '禁用';
      this.$modal.confirm('确认要' + status + '规则"' + row.ruleName + '"吗？').then(() => {
        return updateAlarmRuleConfig(row);
      }).then(() => {
        this.$modal.msgSuccess(status + "成功");
        this.getList();
      }).catch(() => {
        // 恢复原状态
        row.isEnabled = row.isEnabled === '1' ? '0' : '1';
      });
    },
    /** 插入条件模板 */
    insertConditionTemplate(type) {
      const templates = {
        temperature: `{
  "field": "temperature",
  "operator": ">",
  "value": 30,
  "description": "温度超过30度时触发告警"
}`,
        humidity: `{
  "field": "humidity", 
  "operator": "<",
  "value": 40,
  "description": "湿度低于40%时触发告警"
}`,
        device: `{
  "field": "device_status",
  "operator": "=",
  "value": "offline",
  "description": "设备离线时触发告警"
}`,
        system: `{
  "conditions": [
    {
      "field": "cpu_usage",
      "operator": ">",
      "value": 80
    },
    {
      "field": "memory_usage", 
      "operator": ">",
      "value": 90
    }
  ],
  "logic": "OR",
  "description": "CPU使用率超过80%或内存使用率超过90%时触发告警"
}`
      };
      
      if (templates[type]) {
        this.form.triggerCondition = templates[type];
      }
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        ruleId: null,
        ruleName: null,
        ruleType: null,
        alarmLevel: null,
        triggerCondition: null,
        thresholdValue: null,
        comparisonOperator: null,
        deviceTypes: null,
        deviceTypesList: [],
        alarmMessageTemplate: null,
        notificationMethods: null,
        notificationMethodsList: [],
        emailConfig: null,
        smsConfig: null,
        webhookConfig: null,
        isEnabled: '1',
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null
      };
      this.activeTab = "basic";
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.ruleId)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加告警规则";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const ruleId = row.ruleId || this.ids
      getAlarmRuleConfig(ruleId).then(response => {
        this.form = response.data;
        
        // 处理设备类型列表
        if (this.form.deviceTypes) {
          this.form.deviceTypesList = this.form.deviceTypes.split(',');
        }
        
        // 处理通知方式列表
        if (this.form.notificationMethods) {
          this.form.notificationMethodsList = this.form.notificationMethods.split(',');
        }
        
        this.open = true;
        this.title = "修改告警规则";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          // 数据转换处理
          const formData = { ...this.form };
          
          // 处理设备类型列表
          if (formData.deviceTypesList && formData.deviceTypesList.length > 0) {
            formData.deviceTypes = formData.deviceTypesList.join(',');
          }
          
          // 处理通知方式列表
          if (formData.notificationMethodsList && formData.notificationMethodsList.length > 0) {
            formData.notificationMethods = formData.notificationMethodsList.join(',');
          }
          
          // 删除临时字段
          delete formData.deviceTypesList;
          delete formData.notificationMethodsList;
          delete formData.emailConfig;
          delete formData.smsConfig;
          delete formData.webhookConfig;
          
          if (formData.ruleId != null) {
            updateAlarmRuleConfig(formData).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addAlarmRuleConfig(formData).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ruleIds = row.ruleId || this.ids;
      const ruleName = row.ruleName ? `"${row.ruleName}"` : '选中的告警规则';
      this.$modal.confirm('是否确认删除告警规则' + ruleName + '？').then(function() {
        return delAlarmRuleConfig(ruleIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('system/alarmRuleConfig/export', {
        ...this.queryParams
      }, `alarmRuleConfig_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>

<style scoped>
.common-table {
  margin-top: 10px;
}

.common-table .el-table__header th {
  background-color: #fafafa;
  color: #606266;
  font-weight: 500;
}

.el-tag {
  font-weight: 500;
}

.dialog-footer {
  text-align: right;
  padding-top: 20px;
}

.el-form .el-form-item__label {
  font-weight: 500;
  color: #606266;
}

.el-select .el-input__inner {
  cursor: pointer;
}

/* 搜索表单优化 */
.el-form--inline .el-form-item {
  margin-bottom: 10px;
}

/* 表格操作按钮间距 */
.el-table .cell .el-button + .el-button {
  margin-left: 5px;
}

/* 标签页优化 */
.el-tabs--border-card .el-tab-pane {
  padding: 20px;
}

.el-tabs--border-card .el-tabs__content {
  background-color: #fff;
}

/* 弹窗宽度响应式 */
@media (max-width: 768px) {
  .el-dialog {
    width: 95% !important;
  }
}

/* 表格列头样式优化 */
.el-table th.is-leaf {
  border-bottom: 1px solid #EBEEF5;
}

/* 规则类型标签样式优化 */
.el-tag.el-tag--primary {
  background-color: #ecf5ff;
  border-color: #b3d8ff;
  color: #409EFF;
}

.el-tag.el-tag--success {
  background-color: #f0f9ff;
  border-color: #c2e7b0;
  color: #67C23A;
}

.el-tag.el-tag--warning {
  background-color: #fdf6ec;
  border-color: #f5dab1;
  color: #E6A23C;
}

.el-tag.el-tag--danger {
  background-color: #fef0f0;
  border-color: #fbc4c4;
  color: #F56C6C;
}

.el-tag.el-tag--info {
  background-color: #f4f4f5;
  border-color: #d3d4d6;
  color: #909399;
}

/* 规则信息显示优化 */
.rule-info {
  text-align: left;
}

.rule-info .rule-tag {
  margin-right: 8px;
}

.rule-info .rule-name {
  font-weight: 500;
  margin-bottom: 4px;
}

.rule-info .device-types {
  font-size: 12px;
  color: #909399;
}

/* 告警级别显示优化 */
.level-tag {
  font-weight: 500;
  font-size: 12px;
}

/* 触发条件显示优化 */
.trigger-condition {
  text-align: center;
}

.trigger-condition .threshold-label {
  font-size: 12px;
  color: #909399;
  margin-bottom: 2px;
}

.trigger-condition .threshold-value {
  font-weight: 500;
}

.trigger-condition .operator {
  color: #409EFF;
}

.trigger-condition .value {
  color: #F56C6C;
  margin-left: 4px;
}

.trigger-condition .summary {
  font-size: 11px;
  color: #909399;
  margin-top: 2px;
}

/* 通知方式显示优化 */
.notification-methods {
  text-align: center;
}

.notification-methods > div {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px;
}

.notification-methods i {
  font-size: 14px;
}

/* 状态开关优化 */
.el-switch {
  margin: 0;
}

.el-switch .el-switch__label {
  font-size: 12px;
}

/* 创建信息显示优化 */
.creator-info {
  text-align: center;
}

.creator-info .creator {
  font-size: 12px;
  color: #67C23A;
  font-weight: 500;
  margin-bottom: 2px;
}

.creator-info .time {
  font-size: 11px;
  color: #909399;
}

/* 文本域优化 */
.el-textarea .el-textarea__inner {
  resize: vertical;
}

/* 复选框组优化 */
.el-checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.el-checkbox {
  margin-right: 0;
  margin-bottom: 10px;
}

.el-checkbox .el-checkbox__label {
  font-size: 13px;
  color: #606266;
}

/* 提示框样式优化 */
.el-alert {
  margin-top: 10px;
}

.el-alert .el-alert__description {
  font-size: 13px;
  line-height: 1.4;
}

/* 条件模板按钮组 */
.template-buttons {
  margin-bottom: 10px;
}

.template-buttons .el-button {
  margin-right: 8px;
  margin-bottom: 5px;
}

/* 选择框选项样式 */
.el-select-dropdown__item {
  padding: 8px 20px;
  line-height: 1.4;
}

.el-select-dropdown__item span {
  display: block;
}

/* 级别选项颜色 */
.level-option-info {
  color: #909399;
}

.level-option-warning {
  color: #E6A23C;
}

.level-option-critical {
  color: #F56C6C;
}

.level-option-emergency {
  color: #FF0000;
}

/* 规则类型选项颜色 */
.type-option-device {
  color: #409EFF;
}

.type-option-environment {
  color: #67C23A;
}

.type-option-system {
  color: #E6A23C;
}

.type-option-detection {
  color: #F56C6C;
}

/* 开关组件样式 */
.status-switch {
  margin: 0;
}

.status-switch .el-switch__label {
  font-size: 12px;
  color: #606266;
}

/* 卡片样式优化 */
.el-card {
  border-radius: 6px;
}

.el-card .el-card__body {
  padding: 15px;
}

/* 表格行高优化 */
.common-table .el-table__row {
  height: auto;
}

.common-table .el-table__row td {
  padding: 8px 0;
}

/* 操作按钮样式 */
.operation-btn-edit {
  color: #409EFF;
}

.operation-btn-delete {
  color: #F56C6C;
}

/* 字数限制显示优化 */
.el-input__count {
  color: #909399;
  font-size: 12px;
}

/* JSON编辑器优化 */
.json-editor {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 13px;
}

/* 通知配置图标优化 */
.notification-config .el-checkbox {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.notification-config .el-checkbox__label {
  display: flex;
  align-items: center;
}

.notification-config i {
  margin-right: 6px;
  font-size: 16px;
}

/* 条件编辑器按钮样式 */
.condition-template-btn {
  margin-right: 8px;
  margin-bottom: 8px;
  font-size: 12px;
  padding: 5px 10px;
}

/* 表格内容样式 */
.table-content {
  line-height: 1.4;
}

.table-content .main-text {
  font-weight: 500;
  margin-bottom: 4px;
}

.table-content .sub-text {
  font-size: 12px;
  color: #909399;
}

.table-content .highlight-text {
  color: #409EFF;
  font-weight: 500;
}

.table-content .success-text {
  color: #67C23A;
}

.table-content .warning-text {
  color: #E6A23C;
}

.table-content .danger-text {
  color: #F56C6C;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .search-date-range {
    width: 300px;
  }
}

@media (max-width: 992px) {
  .search-input {
    width: 150px;
  }
  
  .search-select-wide {
    width: 140px;
  }
  
  .search-date-range {
    width: 280px;
  }
}

@media (max-width: 768px) {
  .el-form--inline .el-form-item {
    display: block;
    margin-bottom: 15px;
  }
  
  .search-input,
  .search-select,
  .search-select-wide,
  .search-date-range {
    width: 100%;
  }
  
  .el-checkbox-group {
    flex-direction: column;
  }
  
  .template-buttons .el-button {
    display: block;
    width: 100%;
    margin-bottom: 10px;
  }
}
</style>
